<!-- 指标设置 -->

<template>
  <div class="container">
    <van-nav-bar title="指标设置">
      <template #left>
        <div class="left">
          <van-icon name="arrow-left" color="#fff" size="18" @click="$router.back()" />
        </div>
      </template>
    </van-nav-bar>

    <div class="content">
      <div v-for="(item, index) in settingInfo" :key="index" class="part">
        <div class="title">{{ item.name }}</div>
        <div class="list">
          <div v-for="(item, index) in item.list" :key="index" class="item">
            <span>{{ item }}</span>
            <van-icon name="arrow" color="#808080" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
export default {
  name: "IndicatorSetting",
  components: {
    "van-nav-bar": NavBar,
  },
  data() {
    return {
      settingInfo: [
        {
          name: "主图指标",
          list: [
            "VOL(成交量)",
            "MA(移动平均线)",
            "EMA(指数移动平均线)",
            "BOLL(布林线)",
            "SAR(抛物线转向指标)",
          ],
        },
        {
          name: "副图基本指标",
          list: [
            "VOL(成交量)",
            "MA(移动平均线)",
            "MACD(指数平滑异同移动平均线)",
            "KDJ(布林线)",
            "RSI(相对强弱指标)",
            "Stoch RSI(随机相对强弱指数)",
            "OBV(抛物线转向指标)",
            "SAR(抛物线转向指标)",
            "DMA(平行线差指标)",
            "TRX(三重指数平滑移动平均线)",
            "VR(成交量比率)",
            "BRAR(情绪指标)",
            "EMV(简易波动指标)",
            "WR(威廉姆斯指标)",
            "ROC(变化速率)",
            "MTM(动量指标)",
            "PSY(心理线指标)",
            "DMI(动向指标)",
            "CC(商品路径指标)",
          ],
        },
        {
          name: "副图交易指标",
          list: [
            "OI(持仓量)",
            "Top Acc.L/S(头部账户多空比)",
            "Top Pos.L/S(仓位多空比)",
            "Acc.L/S(账户多空比)",
            "Taker B/S(主动买卖量)",
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #000;
  height: 100vh;
  overflow: hidden;
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: 0 !important;

  /deep/ .van-nav-bar {
    background-color: #000;

    &::after {
      border-bottom: none;
    }

    .left {
      display: flex;
      align-items: center;
      gap: 20px;

      .magnification {
        font-size: 20px;
        color: #eaa900;
        transform: translateY(3px);
      }

      .play {
        transform: rotate(90deg);
      }
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }

  .content {
    padding: 0 20px;
    height: 100%;
    overflow: auto;
    .part {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 2px solid #212121;
      .title {
        font-size: 26px;
        margin-bottom: 10px;
        color: #808080;
      }
      .list {
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 0;
        }
      }
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
